<template>
  <div>
    <Modal
      v-model="editManageModalShow"
      draggable
      scrollable
      title="批量修改"
      :closable="false"
    >
      <Form
        ref="editModal"
        :model="formInline"
        :label-width="300"
        class="editModalStyle"
      >
        <FormItem label="字段：">
          <Select v-model="formInline.editOption">
            <Option
              v-for="item in editOptionData"
              :value="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="更新后内容：">
          <Input
            v-model="formInline.textarea"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
            placeholder="更新后内容"
          ></Input>
        </FormItem>
      </Form>

      <template #footer class="footerBtns">
        <CButton @click="cancelEdit" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="editOK" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "editManageModal",
  props: {
    editManageShow: {
      type: Boolean,
      default: false,
    },
    managerselectRow1: ["managerselectRow"],
  },
  data() {
    return {
      editManageModalShow: false,
      formInline: {
        editOption: "",
        textarea: "",
      },
      editOptionData: [
        {
          label: "数据名称",
          value: "image_name",
        },
        {
          label: "产品类型",
          value: "product_level",
        },
        {
          label: "坐标系",
          value: "crs",
        },
        {
          label: "处理算法",
          value: "produce_alg",
        },
        {
          label: "数据格式",
          value: "image_format",
        },
        {
          label: "生产流程",
          value: "produce_workflow",
        },
        {
          label: "云量",
          value: "cloud_cover",
        },
        {
          label: "分辨率",
          value: "image_gsd",
        },
      ],
    };
  },
  methods: {
    editOK() {
      // this.editManageModalShow =false
      let aa = [];
      this.managerselectRow1.forEach((ele) => {
        let obj = new Object();
        obj[this.formInline.editOption] = this.formInline.textarea;
        obj["id"] = ele.id;
        aa.push(obj);
      });
      let path = this.$api.dataOptimizationApi.mosteditupdateByIds;
      this.http.put(path, aa).then((ele) => {
        debugger;
        if ((ele.data.code = "0")) {
          this.$Message.success("编辑成功");
        } else {
          this.$Message.error("编辑失败");
        }
        return (this.$emit("fresh"))
      });
      this.$emit("closededitManage");
      this.formInline = {
        editOption: "",
        textarea: "",
      };
    },
    cancelEdit() {
      this.$emit("closededitManage");
    },
  },
  watch: {
    editManageShow: {
      handler(val) {
        console.log(val, "val");
        this.editManageModalShow = val;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped>
.editModalStyle {
  margin-left: -200px;
}
</style>